<template>
  <el-container>
    <el-header>
      <div class="logo">
        <div calss="logobox"><img src="../../assets/img/u191.png" alt="" /></div>
        <ul class="ulbox">
          <li v-for="(item, i) in navData" :key="i" @click="goHome(i, item.path)" :class="item.state ? 'active' : ''">
            {{ item.name }}
          </li>
        </ul>
      </div>
      <el-button type="info" @click="deleteTuken">退出</el-button>
    </el-header>
    <!-- 二级路由 -->
    <router-view></router-view>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      sidebarOptions: [],
      value: '100',
      icons: ['el-icon-s-custom', 'el-icon-ship', 'el-icon-shopping-bag-1', 'el-icon-tickets', 'el-icon-data-analysis'],
      navData: [
        { name: '首页', state: false, path: '/home' },
        { name: '商品', state: true, path: '/goods' },
        { name: '订单', state: false },
        { name: '库存', state: false },
        { name: '用户', state: false },
        { name: '运营', state: false, path: '/runs' },
        { name: '统计', state: false },
        { name: '财务', state: false },
        { name: '设置', state: false }
      ],
      defaultActive2: ''
    }
  },
  methods: {
    // 退出
    deleteTuken() {
      window.localStorage.removeItem('token')
      this.$router.push('/login')
    },
    // 获取列表数据
    async asideData() {
      let { data: res } = await this.$axios.get('menus')
      this.sidebarOptions = res
    },
    // 将点击的高亮index存到sessionStorage中
    defaultActive(val) {
      this.defaultActive2 = window.sessionStorage.getItem('defaultActive')
    },
    goHome(i, path) {
      // console.log(path)
      this.navData.forEach(item => {
        item.state = false
      })
      this.navData[i].state = true
      if (this.$route.path === path) return false
      if (path === undefined) {
        this.$router.push('/all')
      } else {
        this.$router.push(path)
      }
    }
  },
  created() {
    this.navData.forEach(item => {
      var path = item.path || ''
      if (path === this.$route.path) {
        item.state = true
      } else {
        item.state = false
      }
    })
    if (this.$route.path === '/all') {
      this.$set(this.navData[0], 'state', true)
      this.$router.push('/home')
    }
  },
  beforeRouteUpdate(to, from, next) {
    this.defaultActive2 = to.fullPath
    next()
  }
}
</script>

<style lang="less" scoped>
a {
  display: inline-block;
  width: 100%;
  height: 100%;
}

.el-container {
  height: 100%;
}
.el-header {
  background: #595e6c;
  color: #fcfdfd;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 0;
  height: 50px !important;
  .logo {
    display: flex;
    height: 100%;
    width: 80%;
    .logobox {
      box-sizing: border-box;
    }
    div {
      width: 92px;
      img {
        margin: 10px 0 0 10px;
        font-size: 0;
        width: 80px;
      }
    }
    .ulbox {
      display: flex;
      font-size: 12px;
      li {
        padding: 0 15px;
        text-align: center;
        line-height: 50px;
        &:nth-child(1) {
          margin-left: 10px;
        }
        &:hover {
          background: #828690;
          cursor: pointer;
        }
      }
    }
  }
}

.active {
  background: #828690;
}
</style>
